<template>
  <div>
    <t-space>
      <t-card title="待填表单" header-bordered>
        <!--操作按钮-->
        <template #actions>
          <t-select style="width: 240px" v-model="selectYear" :options="years" placeholder="请选择表单年份" />
        </template>
        <t-list>
          <t-list-item v-for="table in myTables" :key="table.id">
            <t-popup :content="table.tableName">
              {{table.fill==='1'?'已填': '未填'}} - {{table.tableName | ellipsis}}
            </t-popup>
            <template #action>
              <t-space>
                <t-button size="small" @click="showTableForm(table, 0)">查看</t-button>
                <t-button size="small" :disabled="!table.fill" @click="showTableForm(table, 1)">填写</t-button>
              </t-space>
            </template>
          </t-list-item>
        </t-list>
      </t-card>
      <t-card :title="tableCardTitle">
        <tab-unit-base-info-form :edit="isEdit" :isCommit="!selectTable?.fill"></tab-unit-base-info-form>
      </t-card>
    </t-space>
  </div>
</template>

<script>
import TabUnitBaseInfoForm from '../TabUnitBaseInfo/form2.vue'

const curYear = new Date().getFullYear()
function genYears() {
  const years = [];
  for (let i = 0; i < 5; i++) {
    const t = curYear - i;
    years.push({ label: t.toString(), value: t });
  }
  return years;
}

export default {
  name: 'process',
  filters:{
    ellipsis(value){
      if (!value) return '';
      if (value.length > 10) {
        return `${value.slice(0,10)  }...`
      }
      return value
    }
  },
  components: {
    TabUnitBaseInfoForm
  },
  data() {
    return {
      myTables: [],
      selectYear: curYear,
      years: genYears(),
      selectTable: undefined,
      isEdit: false
    }
  },
  computed: {
    tableCardTitle() {
      const { selectTable } = this
      if (selectTable) {
        return `【${selectTable.years}】 ${selectTable.tableName}`
      }
      return '请先选择表单'
    }
  },
  created() {
    this.getMyTables()
  },
  methods: {
    async getMyTables() {
      const { rows } = await this.$api.kjtjdc.table.getMyTables({year: this.selectYear});
      this.myTables = rows;
    },
    showTableForm(table, isEdit) {
      this.selectTable = table
      if (isEdit) {
        this.isEdit = true
        console.log('edit form')
      } else {
        this.isEdit = false
        console.log('show form')
      }
    }
  }
}
</script>

<style lang="less" scoped>

</style>
